<template>
    <!-- <div>稻飞虱预警</div> -->
    <SubTitle>
        <template #subtitle>稻飞虱预警</template>
      </SubTitle>
    <div class="riceplanthopper" ref="riceplanthopper"></div>
  </template>
  
  <script>
  import * as echarts from 'echarts'
  import SubTitle from './SubTitle.vue';
  export default {
    components:{
      SubTitle
    },
      mounted(){
          setTimeout(() => {
            let riceplanthopper = echarts.init(this.$refs.riceplanthopper);
          let xdata = [2013,2014,2015,2016,2017,2018,2019,2020,2021,2022,2023,2024,2025];
          let data = [11,25,43,40,27,38,20,19,22,48,18,39,11];
          let option = {
            xAxis:{
              type:'category',
              data:xdata,
              axisLabel:{
                interval:1
              }
            },
            yAxis:{
              type:'value'
            },
            series:[
              {
                type:'line',
                data,
                smooth:true,
                lineStyle:{
                  color:'rgba(224, 239, 19, 1)',
                  width:3
                }
              }
            ]
          }
          riceplanthopper.setOption(option);
          }, 1);
      }
  }
  </script>
  
  <style lang="less" scoped>
    .riceplanthopper{
  
      width: 100%;
      height: 290px;
    }
    @media screen and (max-width: 720px) {
    .riceplanthopper{
      width: 100%;
      height: 300px;
    }
  }
  </style>